<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="设置" left-arrow :fixed="true" z-index="999">
        <template #left>
          <van-icon
            name="arrow-left"
            class="icon"
            @click="$emit('showPopup')"
          />
        </template>
      </van-nav-bar>
    </div>

    <div class="setting">
      <div class="setting_user">
        <van-cell title="编辑资料" is-link @click="$router.push('/userdata')" />
        <van-cell title="修改密码" is-link @click="PasswordPopshow = true" />
        <!-- <van-cell title="帐号与安全" is-link /> -->
        <van-cell title="隐私设则" is-link />
      </div>

<!-- 修改密码弹出层 -->
      <van-popup
        v-model="PasswordPopshow"
        position="right"
        :style="{ width: '100%', height: '100%' }"
      >
      <SetPassword @Popupdown="PasswordPopshow=false"></SetPassword>
      </van-popup>

      <div class="setting_user">
        <van-cell title="夜间模式" is-link>
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>
        <van-cell title="大字模式" value="标准" is-link />
        <van-cell title="字体大小" is-link />
      </div>

      <div class="setting_user">
        <van-cell
          title="自动开启阅读模式"
          label="访问第三方站点时，更流畅的阅读体验"
          is-link
        >
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>
      </div>

      <div class="setting_user">
        <van-cell title="清理缓存" value="24MB" is-link />
        <van-cell title="播放与网络设置" is-link />
        <van-cell title="安全浏览设置" is-link />
        <van-cell title="推送通知设置" is-link />
        <van-cell title="提示音开关" is-link>
          <template #right-icon>
            <van-switch v-model="checked2" />
          </template>
        </van-cell>
        <van-cell title="点击返回键获取新资讯" is-link>
          <template #right-icon>
            <van-switch v-model="checked2" />
          </template>
        </van-cell>
      </div>

      <div class="setting_user">
        <van-cell title="作品配图自动添加水印" is-link>
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>
      </div>

      <div class="setting_user">
        <van-cell title="检查版本" is-link />
        <van-cell title="关于头条" is-link />
        <van-cell title="用户反馈" value="1.0" is-link />
      </div>

      <div class="out_button">
        <button class="btn" @click="back">退出登录</button>
      </div>
    </div>
    <footer class="footer">小莱头条 xiaolaitoutiao.com</footer>
  </div>
</template>

<script>
import { Dialog } from "vant";
import SetPassword from './SetPassword.vue'


export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    SetPassword
  },
  data() {
    return {
      checked: false,
      checked2: true,
      PasswordPopshow: false,
    };
  },
  methods: {
    back() {
      Dialog.confirm({
        title: "",
        message: "退出无法获取更多热点信息了哦，再想想！",
      });
      localStorage.clear();
      sessionStorage.clear();
      this.$emit("outPut");
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: #000;
}

.box {
  background-color: #f8f8f8;
  padding-top: 55px;
  padding-bottom: 20px;
  overflow-y: auto;
}
.icon {
  color: #000;
  font-size: 16px;
}
.setting {
  overflow-y: auto;
.van-popup{
  overflow-y: none;
}
  .setting_user {
    margin-bottom: 8px;
  }
}
.out_button {
  margin-top: 15px;
  .btn {
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: none;
    color: red;
  }
}
.footer {
  margin-top: 30px;
  text-align: center;
  color: gray;
}
</style>
